import { graphql } from 'gatsby';

import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';
import Breadcrumb from '../../examples/Breadcrumb';


## Breadcrumbs

Indicate the current page’s location within a navigational
hierarchy that automatically adds separators via CSS. Add `active `
prop to active  `Breadcrumb.Item `. Do not
set both  `active ` and  `href ` attributes. `active ` overrides  `href ` and  `span `
element is rendered instead of  `a `.

### Example

<ReactPlayground codeText={Breadcrumb} />

## API

<ComponentApi metadata={props.data.Breadcrumb} />

<ComponentApi
  metadata={props.data.BreadcrumbItem}
  exportedBy={props.data.Breadcrumb}
/>


export const query = graphql`
  query BreadcrumbQuery {
    BreadcrumbItem: componentMetadata(displayName: { eq: "BreadcrumbItem" }) {
      ...ComponentApi_metadata
    }
    Breadcrumb: componentMetadata(displayName: { eq: "Breadcrumb" }) {
      ...ComponentApi_metadata
    }
  }
`;
